<template>
  <div>
    <child ref='myc1' />
    <child />
    <child />
    <h1
      v-for='i in ary'
      ref='myh'
    >hello{{i}}</h1>
  </div>
</template>
<script>
// @ is an alias to /src
import child from "./components/child.vue";
export default {
  name: "XXX",
  data() {
    return {
      ary: [1, 2, 3, 4, 5],
    };
  },
  mounted() {
    // console.log(this.$children);
    console.log(this.$refs.myh.length);
    this.ary.push(6);
    this.$nextTick(() => {
      // DOM 更新完成之后才会执行这个回调函数
      console.log(this.$refs.myh.length);
    });
    this.ary.push(6);
    this.$nextTick(function () {
      console.log(this.$refs.myh.length);
    }, this);
    this.ary.push(6);
    this.ary.push(6);
    this.ary.push(6);
    // DOM更新是一个异步操作
    this.$nextTick(() => {
      // DOM 更新完成之后才会执行这个回调函数
      console.log(this.$refs.myh.length);
    });
  },
  components: {
    child,
  },
};
</script>
<style lang="less">
</style>